The Asterisk is used to select all elements. It can be used either on its own: * { }, or following another identifer to only style all decendants of the given indentifer: section * { }.
Example: All elements on this page are styled by default with:
* { border: none; margin: 0px; padding: 0px; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }
The ID selector is used to select elements with a specified ID. While this is pretty straightforward just be sure not to use the same ID twice
Example: This section is styled to bed red using:
#S2 { background-color: lightcoral; }
The class selector is similar to the ID selector execpt is used for elements which specific classes, this is better if you want certain kinds of sections to be styled differently and not just a singular one.
Example: All elements in this section besides the container have the S3 class and are styled to have a different color text using:
.S3 { color: blue; }
The Descendant selector is used to select all children from a parent element of a certain type. This is useful for when you want to style all of one kind of a element within a container without styling elements in other containers of the same class or type.
Example: All the paragraph elements in this section are styled to be bold using:
#S4 p { color: rgb(1, 90, 1); }
This selector is very straightforward. It selects all elements of the element type and styles them accordingly.
Example: All of the sections that contain these selector examples are styled using:
section { background-color: rgb(187, 186, 186); margin: 3vh auto; width: 40%; padding: 1vh; }
The Adjacent selector is used to select only the elem2 that is the immediatley following elem1. This is useful styling in pairs and if you know it is actually very helpful.
Example: The first occurance of a paragraph tag that follows another paragraph tag (note: this would affect both the 2nd and 3rd paragraph tag in this case since they both have another paragraph tag infront of them) is styled using:
#S6 p + p { color: rgb(204, 24, 24); }
The Child selector is used to select elements (elem2) that are direct decendants of elem1. This is useful becuase it allows you to select only the first level of a tag in the event that a container has another container with the same tags within.
Example: This paragraph tag and the next are contained within a div that is within the section unline the first paragraph tag, using the Child selector it allows us to style only the first paragraph tag that is not contained within the div using:
#S7 > p { color: blue; }
The Sibling selector is used to select all instances of elem2 that are siblings of elem1. In other words all instances of elem2 that are on the same level of abstraction as elem1.
Example: All paragraph tags in this section are styled using:
#S8 h2 ~ p { color: blueviolet; }
The hover selector is used to create an affect when a user hovers there mouse over the given element.
Example: When hovering over this section the background changes to light blue, this is done using:
#S9:hover { background-color: lightblue; }
The Attribute selector is used to select elements with a specific attribute. I find this most useful when styling forms to style input elements with a type like submit
Example: This would be done using:
input[type="submit"] { background-color: red; padding: 2px; color: white;}
This selector is used to select a specific occurance of a tag, or can be used to select odd or even occurances of a tag using nth-child(even). Note: with this selector its the nth child of the parent element if its of type elem. Meaning that the second is not the nth occurance of the element type but rather the nth child of the parent element if its of the type elem.
Example: The 1st and 3rd paragraph tag in this section are blue using:
#S11 p:nth-child(even){ color: blue; }
This selector is used to select the last occurance of a type on the page.
Example: In the case of this section it is given a extra margin on the bottom to account for the footer using:
section:last-of-type { margin-bottom: 7vh; }